<template>
  <div :class="radioCls" @click="handleClick()">
    <input type="radio" :checked="isChecked" />
    <label>{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'radio',
  props: {
    label: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleClick() {
      this.$parent.$children.forEach((item, index) => {
        if (item.label === this.label) {
          item.isChecked = true
          this.$parent.$emit('on-change', item.label, index)
          return
        }
        item.isChecked = false
      })
    }
  },
  computed: {
    radioCls: function() {
      return [
        'radio-items',
        {
          active: this.isChecked || this.label === this.$parent.value
        }
      ]
    }
  },
  created() {
    this.isChecked = this.label === this.$parent.value
  }
}
</script>
<style lang="scss" scoped>
.radio-items {
  margin: 0 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  input {
    margin: 0 4px;
    cursor: pointer;
  }
  label {
    cursor: pointer;
  }
}
.radio-items.active {
  color: #409eff;
}
</style>
